{% extends 'base.html' %}
{% load humanize %}

{% block title %}Generate Report - TaskFlow{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Task Report</h1>
        <div>
            <a href="#" class="btn btn-primary btn-sm" onclick="window.print()">
                <i class="fas fa-print fa-sm text-white-50"></i> Print Report
            </a>
            <a href="{% url 'reports:department_performance' department_id=request.user.department.id %}" class="btn btn-info btn-sm">
                <i class="fas fa-chart-line fa-sm text-white-50"></i> Performance Report
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Tasks</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ tasks|length }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tasks Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">Recent Tasks</h6>
            <span class="text-muted small">Generated on {{ now|date:"F j, Y" }}</span>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Assigned To</th>
                            <th>Status</th>
                            <th>Priority</th>
                            <th>Due Date</th>
                            <th>Created</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for task in tasks %}
                        <tr>
                            <td>{{ task.title }}</td>
                            <td>{{ task.assigned_to.get_full_name|default:task.assigned_to.email }}</td>
                            <td>
                                <span class="badge {% if task.status == 'completed' %}bg-success
                                    {% elif task.status == 'in_progress' %}bg-primary
                                    {% else %}bg-warning{% endif %}">
                                    {{ task.get_status_display }}
                                </span>
                            </td>
                            <td>
                                <span class="badge {% if task.priority == 'high' %}bg-danger
                                    {% elif task.priority == 'medium' %}bg-warning
                                    {% else %}bg-info{% endif %}">
                                    {{ task.get_priority_display }}
                                </span>
                            </td>
                            <td>{{ task.due_date|date:"M d, Y" }}</td>
                            <td>{{ task.created_at|timesince }} ago</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6" class="text-center">No tasks found</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Print Styles -->
<style media="print">
    @page {
        size: A4 portrait;
        margin: 1.5cm;
    }
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    .no-print {
        display: none !important;
    }
    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
    .table {
        font-size: 10pt;
    }
    .badge {
        border: 1px solid #000;
        color: #000 !important;
        background-color: transparent !important;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add print button functionality
    document.querySelector('.btn-print').addEventListener('click', function(e) {
        e.preventDefault();
        window.print();
    });
});
</script>
{% endblock %}